<template>
  <div class="content">
    <div class="tableBox">
      <div class="tableBox-left">
        <Tree
          :data="treeData"
          @on-contextmenu="handleContextMenu"
          @on-select-change="handleSelect"
        >
          <template slot="contextMenu">
            <DropdownItem
              @click.native="handleContextMenuAdd(contextData)"
              :disabled="contextData.type != 1"
              >新增下级单位</DropdownItem
            >
          </template>
        </Tree>
      </div>
      <div class="tableBox-right">
        <div style="width:100%">
          <cusTable border :loading="loading" :columns="columns" :data="data" :bottomClass="['cus-page']">
            <template slot-scope="{ row }" slot="operation">
              <div class="flex">
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: '#1E6FFF', padding: '0 8px' }"
                  @onClick="onEdit(row)"
                >
                  编辑
                </cus-button>
                <Poptip
                  confirm
                  transfer
                  placement="left"
                  :title="`是否确认禁用 ${row.name} ？`"
                  @on-ok="onClose(row)"
                >
                  <cus-button
                    type="text"
                    size="small"
                    :style="{ color: '#FF4746', padding: '0 8px' }"
                    v-if="row.useStatus == 1"
                  >
                    禁用
                  </cus-button>
                </Poptip>
                <Poptip
                  confirm
                  transfer
                  placement="left"
                  :title="`是否确认启用 ${row.name} ？`"
                  @on-ok="onOpen(row)"
                >
                  <cus-button
                    type="text"
                    size="small"
                    :style="{ color: 'green', padding: '0 8px' }"
                    v-if="row.useStatus == 0"
                  >
                    启用
                  </cus-button>
                </Poptip>
              </div>
            </template>
          </cusTable>
          <div style="width: 100%;display: flex;justify-content: flex-end">
            <cus-page
              :data="pages"
              class="mt_20"
              @pageChange="selectDepartmentListApi"
            ></cus-page>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加、修改 单位 -->
    <addUnitModal ref="addUnitModal"></addUnitModal>
  </div>
</template>

<script>
import addUnitModal from "./components/addUnitModal.vue";
import {
  getUnitLevel,
  selectDepartmentList,
  updateDepartmentStatus
} from "@/api/business/dishesModule";
export default {
  components: { addUnitModal },
  name: "subordinateUnits",
  data() {
    return {
      loading: false,
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center"
        },
        {
          title: "单位名称",
          key: "name",
          align: "center"
        },
        {
          title: "所属组织",
          key: "upUnitName",
          align: "center"
        },
        {
          title: "编号",
          key: "code",
          align: "center"
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center"
        },
        {
          title: "操作",
          width: 200,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ],
      treeData: [],
      contextData: { type: 1 },
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0
      }
    };
  },
  mounted() {
    this.getUnitLevelApi();
  },
  methods: {
    onInit() {
      if (this.contextData.type == 1) {
        this.getUnitLevelApi();
      } else {
        this.selectDepartmentListApi();
      }
    },
    handleContextMenu(data) {
      this.contextData = data;
    },
    handleSelect(data) {
      this.contextData = data[0];
      this.pages.page = 1;
      this.selectDepartmentListApi();
    },
    handleContextMenuAdd() {
      this.$refs.addUnitModal.form.topCode = this.contextData.unitCode;
      this.$refs.addUnitModal.form.topName = this.contextData.title;
      if (this.contextData.type == 1) {
        this.$refs.addUnitModal.show();
      }
    },
    // 编辑
    onEdit(row) {
      this.$refs.addUnitModal.form.id = row.id;
      this.$refs.addUnitModal.form.name = row.name;
      this.$refs.addUnitModal.form.phone = row.phone;
      this.$refs.addUnitModal.form.code = row.code;
      this.$refs.addUnitModal.form.functionary = row.functionary;
      this.$refs.addUnitModal.form.companyId = row.companyId;
      this.$refs.addUnitModal.show();
    },
    // 获取下级单位管理层级
    getUnitLevelApi() {
      return new Promise(resolve => {
        getUnitLevel({}).then(res => {
          if (res.retCode === 2000) {
            this.treeData = [
              {
                title: res.data.unitName,
                unitCode: res.data.unitCode,
                type: 1,
                expand: true,
                contextmenu: true,
                children: []
              }
            ];
            if (res.data.unitInfoList.length) {
              res.data.unitInfoList.forEach(element => {
                this.treeData[0].children.push({
                  title: element.unitName,
                  expand: false,
                  contextmenu: true,
                  unitCode: element.unitCode,
                  type: 2
                });
              });
            }
            this.handleSelect(this.treeData);
            resolve();
          }
        });
      });
    },
    // 查询下级单位列表
    selectDepartmentListApi() {
      this.loading = true;
      return new Promise(resolve => {
        selectDepartmentList({
          unitCode: this.contextData.unitCode,
          size: this.pages.pageSize,
          current: this.pages.page
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 启用
    onClose({ code }) {
      this.updateUseStatusApi(code);
    },
    // 禁用
    onOpen({ code }) {
      this.updateUseStatusApi(code);
    },
    // 启用禁用 API
    updateUseStatusApi(code) {
      this.loading = true;
      return new Promise(resolve => {
        updateDepartmentStatus({
          code: code
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.onInit();
            resolve();
          }
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  // padding: 20px;
  height: 100%;
}
.tableBox {
  background: #fff;
  height: 100%;
  padding: 20px;
  display: flex;
  // justify-content: space-between;
  border-radius: 6px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
  &-left {
    // min-height: 500px;
    margin-right: 20px;
    padding: 10px 30px 10px 20px;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid rgba(153, 182, 199, 0.4);
  }
  &-right {
    width: calc(100vw - 411px);
    flex: 1;
    // min-height: 500px;
  }
}
</style>
